import { Form, Input, Modal } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { useEffect, useRef, useState } from "react";

export function ShowCreateModal({show = false, type='project', onSubmit = (v) => {}, onClose = () => {}}) {
  const [ form ] = Form.useForm();

  function handleSubmit() {
    onSubmit(form.getFieldValue(type));
    form.resetFields();
    onClose();
  }

  useEffect(() => {
    if (show) {
      setTimeout(() => {
        document.querySelector(`input#basic_${type}`).focus();
      }, 500);
    }
  }, [show]);

  return <Modal title="请输入规划/计划/任务项名称" open={ show } onOk={ handleSubmit } onCancel={ onClose }>
    <Form name="basic" layout='vertical' autoComplete="off" form={form} onFinish={handleSubmit}>
      <Form.Item name={type}
        rules={ [ { required: true, message: '请输入规划/计划/任务项名称' } ] }
      >
        <Input size="large" placeholder="请输入规划/计划/任务项名称" prefix={ <UserOutlined/> }/>
      </Form.Item>
    </Form>
  </Modal>;
}